<script setup lang="ts">
let gridAutoFlow = ref('row')
</script>

<template>
<div class="wrap">
  <div class="control">
    <label for="grid-auto-flow">grid-auto-flow: </label>
    <select v-model="gridAutoFlow" name="grid-auto-flow" id="grid-auto-flow">
      <option value="row" selected>row</option>
      <option value="column">column</option>
      <option value="dense">dense</option>
      <option value="row dense">row dense</option>
      <option value="column dense">column dense</option>
    </select>
  </div>
  <ul class="gallery">
    <li>
      <img src="https://source.unsplash.com/random?iran" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?greece" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?dance" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?usa" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?spain" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?italy" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?france" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?china" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?japan" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?uk" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?england" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?cuba" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?amazon" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?germany" alt="">
    </li>
    <li>
      <img src="https://source.unsplash.com/random?canada" alt="">
    </li>
  </ul>
</div>
</template>

<style scoped lang="scss">
.wrap  {
  --grid-auto-flow: v-bind(gridAutoFlow);

  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  padding: 2rem;

  .control {
    display: flex;
    align-items: center;
    gap: 10px;
    select {
      font: inherit;
    }
    span {
      color: #fff;
    }
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(6, 8vw);
    grid-template-rows: repeat(4, 8vw);
    grid-auto-rows: 8vw;
    grid-auto-columns: 8vw;
    grid-auto-flow: var(--grid-auto-flow, row);
    gap: 1rem;

    margin: 1rem;

    li {
      list-style-type: none;
      padding: 5px;
      background-color: #fff;
      border-radius: 1rem;
      box-shadow: 0.3px 0.5px 0.7px hsl(0deg 0% 0% / 0.36),
      0.8px 1.6px 2px -0.8px hsl(0deg 0% 0% / 0.36),
      2.1px 4.1px 5.2px -1.7px hsl(0deg 0% 0% / 0.36),
      5px 10px 12.6px -2.5px hsl(0deg 0% 0% / 0.36);

      &:nth-child(2),&:nth-child(4),&:nth-child(6) {
        grid-column: span 2;
        grid-row: span 2;
      }

      &:nth-child(5),&:nth-child(7),&:nth-child(9) {
        grid-column: span 3;
        grid-row: span 2;
      }

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
      }

    }
  }
}
</style>
